<!DOCTYPE html>
<html>

<head>
  <style>
    #tableWrapper {
      width: 100%;
      height: 200px; /* 设置表格容器的高度 */
      overflow: auto; /* 添加滚动条 */
      margin-top: -10px; /* 负的外边距值，根据实际情况调整 */
    }
    #table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
      background-color: rgba(0, 0, 0, 0);
    }
    #table th,
    #table td {
      border: 1px solid #ccc;
      padding: 8px;
      background-color: #f9fafb;
    }
    #table tr:nth-child(odd) {
      background-color: #cfdff5;
    }
    #table th {
      background-color: #f9fafb;
      position: sticky;
      top: 0;
    }
    #tableWrapper {
    height: 200px; /* 设置表格容器的高度为固定值 */
    overflow: auto; /* 添加滚动条 */
  }
  #tableWrapper {
    height: 200px; /* 设置表格容器的高度为固定值 */
    overflow: auto; /* 添加滚动条 */
  }
  
  /* 设置滚动条的高度与表格容器的高度一致 */
  #tableWrapper::-webkit-scrollbar {
    width: 10px;
    height: 100%; /* 设置滚动条的高度为100% */
  }
  
  /* 其他滚动条样式设置 */
  #tableWrapper::-webkit-scrollbar-track {
    background-color: #f1f1f1;
  }
  
  #tableWrapper::-webkit-scrollbar-thumb {
    background-color: #888;
  }
  
  #tableWrapper::-webkit-scrollbar-thumb:hover {
    background-color: #555;
  }
    </style>
</head>

<body>
  <div id="tableWrapper"> <!-- 添加包裹表格的容器 -->
    <table id="table">
      <thead>
        <tr>
          <th>日期</th>
          <th>姓名</th>
          <th>地址</th>
        </tr>
        <tr class="special-row">
          <th colspan="2">表头合并单元格</th>
        </tr>
      </thead>
      <tbody id="tableBody">
      </tbody>
    </table>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var tableData = [
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      },
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }
    ]

    $(document).ready(function () {
      var $tableBody = $('#tableBody')
      var $tableHead = $('#table')
      $.each(tableData, function (index, item) {
        var $row = $('<tr>')
        $row.append($('<td>').text(item.date))
        $row.append($('<td>').text(item.name))
        $row.append($('<td>').text(item.address))
        $tableBody.append($row)

      })
    });
  </script>
</body>

</html>